<template>
    <div>
        <div class="guide">
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <span class="img"><img src="../../assets/images/海报01.webp"></span>
                    </div>
                    <div class="swiper-slide">
                        <span class="img"><img src="../../assets/images/海报02.webp"></span>
                    </div>
                    <div class="swiper-slide">
                        <span class="img"><img src="../../assets/images/海报03.webp"></span>
                    </div>
                    <div class="swiper-slide">
                        <span class="img"><img src="../../assets/images/海报04.webp"></span>
                        <button @click="gotorecommend" class="bottom">点击立即体验</button> 
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import Swiper from "swiper";
    export default {
     data() {
         return {
             
         }
     },   
     methods:{
        gotorecommend(){
            this.$router.push('/recommend')  
            window.localStorage.setItem("guide",true);
        }
     },
     mounted() {    
         new Swiper('.swiper-container', {
           pagination: {
             el: '.swiper-pagination',
           },
         });
     },
    }
</script>

<style lang="less">
    // @import '../package/swiper-bundle.min.css';
    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      position: relative;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      .img{
          display: block;
          width: 100%;
          height: 100%;
          img{
            display: block;
            width: 100%;
            height: 100%;
          }
      }
      .bottom{
        position: absolute;
        bottom: 40px;
        left: calc(50% - 75px);
        width: 150px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        border-radius: 5px;
        background-color: #c20c0c;
        color: white;
        z-index: 1000;
        opacity: 0.8;
      }
    }
</style>